<template>
  <div class="TJ_currency">
    <div class="query">
      日期区间：
      <el-date-picker
        v-model="query.time"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions"
        size="small"
        @change="set_time"
        :disabled="query.dataType != 0"
      >
      </el-date-picker>
      <el-cascader
        size="small"
        @change="org_change"
        :options="jigou_1"
        :props="{
          label: 'Name',
          value: 'Id',
          children: 'Children',
          checkStrictly: true,
        }"
        clearable
      ></el-cascader>
      <el-button
        icon="el-icon-search"
        size="small"
        style="margin-left: 10px"
        type="primary"
        @click="getTable"
        :disabled="query.dataType != 0"
      ></el-button>
      <!-- <el-radio-group
        v-model="query.dataType"
        size="small"
        style="margin-left: 10px"
        @change="getTable"
      >
        <el-radio-button label="0">按机构</el-radio-button>
        <el-radio-button label="1">按医生</el-radio-button>
      </el-radio-group> -->
      <el-button
        v-if="false"
        size="small"
        style="margin-left: 15px"
        type="primary"
        @click="up_click"
        :disabled="query.parentOrgId == '3015'"
        >返回</el-button
      >
    </div>
    <div class="main">
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        height="650"
        :header-cell-style="{
          color: '#000',
          backgroundColor: 'rgb(157,201,210)',
          fontFamily:'FangSong'
        }"
        v-loading="isLoading"
      >
        <el-table-column prop="Name" label="Name" align="center" fixed="left">
          <template slot-scope="scope">
            <span
              v-if="query.dataType == 0"
              >{{ scope.row.Name | Name_filter }}</span
            >
            <span v-else>{{ scope.row.Name }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="Data.建档人数" label="建档人数" align="center">
        </el-table-column>
        <el-table-column prop="Data.体检人数" label="体检人数" align="center">
        </el-table-column>
        <el-table-column
          prop="Data.随访总次数"
          label="随访总次数"
          align="center"
        >
        </el-table-column>
        <el-table-column label="一季度" align="center">
          <el-table-column
            prop="Data.Q1随访次数"
            label="季度随访人数"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="Data.Q1增加1次随访"
            label="增加1次人数"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="Data.Q1增加2次随访"
            label="增加2次人数"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="Data.Q1随访次数"
            label="随访次数"
            align="center"
          >
          </el-table-column>
        </el-table-column>
        <el-table-column label="二季度" align="center">
          <el-table-column
            prop="Data.Q2随访次数"
            label="季度随访人数"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="Data.Q2增加1次随访"
            label="增加1次人数"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="Data.Q2增加2次随访"
            label="增加2次人数"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="Data.Q2随访次数"
            label="随访次数"
            align="center"
          >
          </el-table-column>
        </el-table-column>
        <el-table-column label="三季度" align="center">
          <el-table-column
            prop="Data.Q3随访次数"
            label="季度随访人数"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="Data.Q3增加1次随访"
            label="增加1次人数"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="Data.Q3增加2次随访"
            label="增加2次人数"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="Data.Q3随访次数"
            label="随访次数"
            align="center"
          >
          </el-table-column>
        </el-table-column>
        <el-table-column label="四季度" align="center">
          <el-table-column
            prop="Data.Q4随访次数"
            label="季度随访人数"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="Data.Q4增加1次随访"
            label="增加1次人数"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="Data.Q4增加2次随访"
            label="增加2次人数"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="Data.Q4随访次数"
            label="随访次数"
            align="center"
          >
          </el-table-column>
        </el-table-column>
        
      </el-table>
    </div>
    <!-- 患者列表弹层 -->
    <el-dialog
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="handleClose"
      :append-to-body="true"
      :close-on-click-modal="false"
    >
      <div>
        <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page.sync="query2.currentPage"
          :page-size="query2.pageSize"
          layout="total, prev, pager, next"
          :total="query2.totle"
        >
        </el-pagination>
      </div>
      <el-table
        :data="tableData_p"
        border
        style="width: 100%; margin-top: 5px"
        height="400"
        v-loading="isLoading2"
      >
        <el-table-column prop="main.Residentname" label="姓名" fixed="left">
          <template slot-scope="scope">
            <span
              v-if="scope.row.isBulid"
              style="
                color: blue;
                border-bottom: 1px solid blue;
                font-weight: 700;
              "
              @click="goto_userDA(scope.row.main)"
            >
              {{ scope.row.main.Residentname }}
            </span>
            <span v-else>{{ scope.row.main.Residentname }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="isBulid" label="是否建档">
          <template slot-scope="scope">
            <span v-if="scope.row.isBulid" style="color: green">已建档</span>
            <span v-else style="color: red">未建档</span>
          </template>
        </el-table-column>
        <el-table-column prop="main.ChronicType" label="慢病种类">
        </el-table-column>
        <el-table-column prop="main.Gender" label="性别">
          <template slot-scope="scope">
            {{ scope.row.main.Gender == 1 ? "男" : "女" }}
          </template>
        </el-table-column>
        <el-table-column prop="main.Idcard" label="证件号"> </el-table-column>
        <el-table-column prop="main.Telephone" label="电话"> </el-table-column>
        <el-table-column prop="main.Permanentaddress" label="户籍地址">
        </el-table-column>
        <el-table-column prop="main.Nowaddress" label="现住址">
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      query: {
        time: [],
        startTime: "",
        endTime: "",
        dataType: "0",
        parentOrgId: "",
        diseaseCategory: "高血压",
      },
      tableData: [],
      isLoading: false,
      tableData_p: [],
      dialogVisible: false,
      info_user: {},
      query2: {
        currentPage: 1,
        pageSize: 10,
        totle: 0,
        filter: {
          startTime: "",
          endTime: "",
          dataType: "",
          id: "",
          indexName: "",
          diseaseCategory: "",
        },
      },
      isLoading2: false,
      jigou_1: [],
    };
  },
  filters: {
    Name_filter(val) {
      var str = val.replace("玉龙纳西族自治县", "");
      return str;
    },
    lv_filter(val) {
      var srt = Math.round(val * 100) / 100 + "%";
      return srt;
    },
  },
  mounted() {
    this.getJg();
  },
  methods: {
    getJg() {
      this.$get(baseUrl.mbIp + "/api/NPatient/GetOrganTree").then((res) => {
        this.jigou_1 = res.Data;
      });
    },
    org_change(val) {
      this.query.parentOrgId = val[val.length - 1];
      this.getTable();
    },
    set_time() {
      this.query.startTime = this.query.time[0];
      this.query.endTime = this.query.time[1];
      this.getTable();
    },
    getTable() {
      if (this.time == [] || this.query.parentOrgId == "") {
        this.$notify({
          title: "警告",
          message: "请选择日期、机构后查询！",
          type: "warning",
        });
        return;
      }
      this.isLoading = true;
      this.$post(baseUrl.mbIp + "/api/Data/SuiFangTongJi", this.query).then(
        (res) => {
          this.tableData = res.Data;
          this.isLoading = false;
        }
      );
    },
    change_table(val) {
      // this.query.dataType = 1;
      this.query.parentOrgId = val.HospitalId;
      this.getTable();
    },
    up_click() {
      // this.query.dataType = 0;
      this.query.parentOrgId = 3015;
      this.getTable();
    },
    open_dialog(name, num, id) {
      if (num < 1) {
        this.$notify({
          title: "提示",
          message: "当前维度无数据！",
          type: "warning",
        });
        return;
      }
      var body = {
        currentPage: 1,
        pageSize: 10,
        filter: {
          startTime: this.query.startTime,
          endTime: this.query.endTime,
          dataType: this.query.dataType,
          id: id,
          indexName: name,
          diseaseCategory: this.query.diseaseCategory,
        },
      };
      this.query2 = body;
      this.isLoading = true;
      this.$post(baseUrl.mbIp + "/api/Data/GetDataList", body).then((res) => {
        this.tableData_p = res.Data.PageList;
        this.info_user = res.Data;
        this.query2.totle = res.Data.Total;
        this.dialogVisible = true;
        this.isLoading = false;
      });
    },
    handleClose() {
      this.dialogVisible = false;
      this.tableData_p = [];
      this.info_user = {};
    },
    handleCurrentChange(page) {
      this.query2.currentPage = page;
      this.setTable_p();
    },
    setTable_p() {
      this.isLoading2 = true;
      this.$post(baseUrl.mbIp + "/api/Data/GetDataList", this.query2).then(
        (res) => {
          this.tableData_p = res.Data.PageList;
          this.query2.totle = res.Data.Total;
          this.isLoading2 = false;
        }
      );
    },
    goto_userDA(row) {
      this.$router.push("/user_info?idCard=" + row.Idcard);
    },
  },
};
</script>

<style scoped lang='scss'>
.TJ_currency {
  height: calc(100vh - 46px);
  background-color: #fff;
  .query {
    padding: 5px;
  }
  .main {
    margin: 5px;
    border: 1px solid #333;
    padding: 15px 5px;
  }
  .Name_sty {
    font-weight: 700;
    border-bottom: 2px dashed red;
  }

  .num_sty {
    color: blue;
    border-bottom: 1px solid blue;
  }
}
</style>